<template>
  <div>
    <h1>App {{ bbb }}</h1>
    <!-- 
      ref 
        如果给DOM元素绑定，得到真实DOM元素
        如果给组件绑定，得到组件实例对象
     -->
    <A ref="aRef" />
  </div>
</template>

<script>
import A from "./A.vue";

export default {
  name: "App",
  components: {
    A,
  },
  data() {
    return {
      bbb: 2,
    };
  },
  mounted() {
    console.log(this.$refs.aRef.aaa);
    this.$refs.aRef.aaa++;

    // 不建议使用 $children：不保证顺序，也不是响应式
    // 获取子组件的数据
    // console.log(this.$children);
    // console.log(this.$children[0].aaa);
    // 更新子组件数据
    // this.$children[0].aaa++;
  },
};
</script>

<style></style>
